<template>
  <yc-container spacious>
    <yc-search-panel slot="header" v-model="active">
      <yc-bar slot="title">
        <yc-bar-space />
        <yc-bar-cell>
          <yc-pagination :full="false" @change="handlePageChange" :pagination="pagination" />
        </yc-bar-cell>
        <yc-bar-space />
        <yc-bar-cell>
          <el-button-group>
            <yc-button size="mini" icon="el-icon-refresh" label="刷新" @click="handleFetchTableData" />
            <yc-button size="mini" icon="el-icon-set-up" label="设置" @click="handleSettingTable" />
          </el-button-group>
        </yc-bar-cell>
        <yc-bar-cell>
          <yc-button type="primary" size="mini" icon="el-icon-plus" label="新增" v-permission="['management:dept:add']"
            @click="handleCreate" />
        </yc-bar-cell>
      </yc-bar>
      <yc-form ref='form' v-model="search" :setting="formSetting" :itemSetting="formItemSetting" />
    </yc-search-panel>
    <yc-table height="100%" ref="table" :api="api" :columns="columns" is-tree :paging="false" :pagination="pagination"
      highlight-current-row>
      <template v-slot:moreOperation="{ row }">
        <yc-button type="text" size="mini" label="编辑" v-permission="['management:dept:update']"
          @click="handleUpdate(row)" />
        <yc-button size="mini" type="text" label="删除" v-permission="['management:dept:delete']"
          @click="$refs.table.handleDeleteRow(row)" />
      </template>
    </yc-table>
    <yc-bar slot="footer">
      <yc-bar-cell>
        <yc-button type="primary" size="mini" icon="el-icon-tickets" label="全选" @click="handleAllSelection" />
        <yc-button type="primary" size="mini" icon="el-icon-document-copy" label="反选" @click="handleInvertSelection" />
        <yc-button type="primary" size="mini" icon="el-icon-document" label="全不选" @click="handleAllNoneSelection" />
        <yc-button type="danger" size="mini" icon="el-icon-delete" label="删除" v-permission="['management:dept:delete']"
          @click="handleDeleteTable" />
      </yc-bar-cell>
      <yc-bar-space />
      <yc-bar-cell>
        <!-- <vxe-pager
                        size="mini"
                        @page-change="handlePageChange"
                        :page-sizes="[25, 50, 100, 150]"
                        :current-page="pagination.current"
                        :page-size="pagination.size"
                        :total="pagination.total"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']">
                  </vxe-pager> -->
      </yc-bar-cell>
    </yc-bar>
    <yc-dialog width="600px" :mode="mode" :conf="dialogConf" @on-submit="handleSubmit">
      <yc-form ref="depttForm" v-model="formData" :setting="deptFormSetting" :itemSetting="deptFormItemSetting" />
    </yc-dialog>
  </yc-container>
</template>

<script>
import { queryDepts, addDept, updateDept, removeDept } from '@api/management/dept'
import crud from '@/mixins/crud'
export default {
  name: 'dept',
  mixins: [crud],
  data () {
    return {
      api: {
        index: queryDepts,
        modify: updateDept,
        del: removeDept
      },
      mode: 'create',
      dialogConf: {
        dialogVisible: false
      },
      columns: [
        { key: 'checkbox', type: 'checkbox', width: '100', fixed: 'left' },
        { key: 'seq', type: 'seq', width: '100', fixed: 'left' },
        { key: 'name', field: 'name', title: '名称', minWidth: '150', formatter: 'formatEmpty', fixed: 'left' },
        { key: 'createTime', field: 'createTime', minWidth: '150', title: '创建日期' },
        { key: 'status', field: 'status', title: '状态', width: '120', fixed: 'right', cellRender: { name: 'ElSwitch', props: { activeColor: '#13ce66', inactiveColor: '#ff4949', activeValue: 1, inactiveValue: 0 }, events: { change: this.handleChangeStatus } } },
        { key: 'operation', title: '操作', width: '120', slots: { default: 'moreOperation' }, fixed: 'right' }
      ],
      formSetting: {
        useLayout: false,
        inline: true,
        size: 'mini',
        labelPosition: 'top'
      },
      formItemSetting: [
        {
          prop: 'name',
          default: '',
          title: '名称',
          col: { span: 6 },
          name: 'input',
          clearable: true,
          visible: true,
          placeholder: '请输入内容'
        },
        {
          prop: 'status',
          default: '',
          title: '状态',
          col: { span: 6 },
          name: 'dict-select',
          dictName: 'normal_status',
          visible: true
        },
        {
          title: '操作',
          visible: true,
          name: 'button-group',
          options: [
            {
              label: '搜索',
              type: 'primary',
              click: () => { this.handleFetchTableData() }
            },
            {
              label: '重置',
              click: () => { this.handleRestTableData() }
            }
          ]
        }
      ],
      formData: {},
      isMounted: false,
      selectRow: null
    }
  },
  created () {
  },
  mounted () {
    this.isMounted = true
  },
  computed: {
    deptFormSetting () {
      return {
        useLayout: true,
        inline: false,
        size: 'mini',
        labelPosition: 'right',
        labelWidth: '150px'
      }
    },
    deptFormItemSetting () {
      if (!this.isMounted) { return }
      return [
        {
          prop: 'name',
          default: '',
          title: '部门名称',
          col: { span: 18 },
          name: 'input',
          rule: { required: true, message: '请输入部门名称', trigger: 'change' },
          visible: true,
          placeholder: '请输入内容'
        },
        {
          prop: 'status',
          default: 1,
          title: '状态',
          col: { span: 18 },
          name: 'dict-radio',
          dictName: 'normal_status',
          visible: true
        },
        {
          prop: 'isRoot',
          default: 1,
          title: '顶级部门',
          col: { span: 18 },
          name: 'radio-group',
          visible: true,
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]
        },
        {
          prop: 'parentId',
          default: 0,
          title: '上级部门',
          col: { span: 18 },
          name: 'treeselect',
          visible: this.formData.isRoot === 0,
          appendToBody: true,
          normalizer: (node) => {
            return {
              id: node.id,
              label: node.name,
              children: node.children
            }
          },
          options: this.getTableData()
        }
      ]
    }

  },
  methods: {
    handleCreate () {
      this.mode = 'create'
      this.formData = {}
      this.dialogConf.dialogVisible = true
    },
    handleUpdate (row) {
      this.mode = 'update'
      this.selectRow = row
      this.formData = this.$_.cloneDeep(row)
      this.formData.isRoot = row.parentId === 0 ? 1 : 0
      this.dialogConf.dialogVisible = true
    },
    handleSubmit (callBack) {
      var record = this.formData
      if (this.mode === 'create') {
        addDept(record).then(res => {
          var { code, data } = res
          if (code === 200) {
            this.$message.success('添加成功')
            this.$refs.table.insertRow(data)
          } else {
            this.$message.error('添加失败')
          }
          callBack(code === 200)
        })
      } else {
        updateDept(record.id, record).then(res => {
          var { code, data } = res
          if (code === 200) {
            this.$message.success('修改成功')
            this.$refs.table.updateRow(this.selectRow, data)
            this.selectRow = null
          } else {
            this.$message.error('修改失败')
          }
          callBack(code === 200)
        })
      }
    }
  }
}
</script>
